<template>

  <div class="more">
<!--    顶部信息-->
    <nav>
      <div class="van" @click="ret">
        <span class="iconfont icon-fanhui"></span>
        返回
      </div>
      <b>详细信息</b>
    </nav>
    <!-- 这里时菜品列表内容 -->
    <div class="cont"  v-for="item in list">
      <div class="img" >
        <img :src="item.goods_url"/>
      </div>
      <p class="price"  style="font-size: 25px;  font-weight: bold; color: #ffffff; padding:10px">￥{{item.goods_price}}元</p>
      <h1 class="title" style="font-size:25px ">菜品：[{{item.descirbe}}]{{item.goodsname}}
      </h1>
    </div>

<!--添加修改购物车数量-->
<div v-for="obj in list">
<!--    <div  v-if ="obj.st_num ==0 " style="float: right ">-->
<!--      <van-button size="normal "  >-</van-button>-->
<!--      <van-button style="padding-right: 15px;padding-left: 15px;font-size: 30px; " >{{obj.st_num}}</van-button>-->
<!--      <van-button size="normal " v-if ="obj.st_num ==0 " type="primary" color="red" @click="cat(obj)">+</van-button>-->
<!--    </div>-->

    <div  style="float: right"  >
      <van-button size="normal "    @click="reduceNum(obj)">-</van-button>
      <van-button style="padding-right: 15px;padding-left: 15px;font-size: 30px; " >{{obj.st_num}}</van-button>
        <van-button size="normal "  type="primary" color="red" @click="add(obj)">+</van-button>
    </div>
  </div>
<!--跳转购物车组件-->
    <div v-for="item in list">
      <van-goods-action>
        <van-goods-action-icon icon="cart-o" text="购物车" :badge="item.st_num" @click="goCat" />
        <van-goods-action-icon v-if="item.ct_id>0" icon="star" text="已收藏" color="#ff5000"  @click="nocollect(item)"/>
        <van-goods-action-icon v-if="item.ct_id==null" icon="star-o" text="收藏" color="#000000"   @click="collect(item)" />
        <van-goods-action-button type="danger" text="立即购买"  @click="buy(item)" />
      </van-goods-action>
    </div>

  </div>
</template>

<script>
export default {
  data(){
    return{
      list:[],
      sum:"",
        gid:"",
        bid:""

    }
  },
  created() {

    var gid = sessionStorage.getItem("branchid");
    var bid = sessionStorage.getItem("goodsid");

    // let gid = this.$route.params.goodsid;
    // let bid = this.$route.params.bid;
      this.gid=gid
      this.bid=bid

    console.log(gid)
    console.log(bid)

    this.details(gid,bid);
  },
  methods: {
      // 购买

      buy(item){
          if (item.st_num==0){
              this.$message.warning("请添加菜品");
              return false;
          }else if (item.st_num>0){
              console.log(item)
              this.$http.post('/api/payorder/payorder/submitOrder?branchid='+item.branchid+"&goodsid="+item.goodsid+"&sum="+item.st_num).then(result=>{
              })
              setTimeout(() =>{
                  this.$router.push("/index/orderSettle");
              },1000)
          }
      },
      // 去购物车页面
      goCat(){
          this.$router.push(
              "/index/shopCar"
          );
      },





// 添加收藏
    collect(item){
      item.ct_id=1
      this.$http.get('/api/goods/goods/collect?goodsid='+item.goodsid+'&branchid='+item.branchid).then(result=>{

      })
    },
    // 删除收藏
    nocollect(item){

      this.$http.get('/api/goods/goods/nocollect?id='+item.ct_id).then(result=>{

      })
      item.ct_id=null
    },
    add(obj){
          if (  obj.st_num===0){
              this.cat(obj)
          }else {
              this.addNum(obj)
          }
          this.sums()
    },


// 添加进购物车
      cat(obj) {

          this.$http.post("/api/shoppingcar/shoppingTrolley/addCat?branchid=" + obj.branchid + "&goodsid=" + obj.goodsid + "&stNum=" + 1 + "&goodsPrice=" + obj.goods_price).then(result => {
              obj.st_num++;
              this.details(this.gid,this.bid);
          })
      },

          //商品数量增加
    addNum(obj){

      this.$http.get('/shoppingcar/shoppingTrolley/addNum?gid='+obj.goodsid+"&bid="+obj.branchid).then(result=>{
          obj.st_num++;

      })

    },

    //商品数量减少
    reduceNum(obj){
      if(obj.st_num <= 1){
          this.$http.get('/api/shoppingcar/shoppingTrolley/delCat?ctid='+obj.st_id).then(result=>{
          })
          obj.st_num=0
      }else{
          this.$http.get('/shoppingcar/shoppingTrolley/reduceNum?gid='+obj.goodsid+"&bid="+obj.branchid).then(result=>{
          })
          obj.st_num - 1 > 0 ? obj.st_num-- : 0;

      }

    },


    sums(){
        this.list.forEach((item) => {
            //遍历list这个字段，并累加
            if (item.st_num==null){
                item.st_num=0
            }
        });
        // //返回
        // this.sum = sum;
    },

      // 返回
    ret() {
      this.$router.back();
    },
// 显示页面
    details(gid,bid){
      this.$http.post("http://192.168.1.18:81/api/goods/goods/selectByid?branchid="+gid+"&goodsid="+bid).then(result=>{
        console.log(result)
        if (result.data.code===2000){
          this.list = result.data.data;
          this.sums()
        }
      })
    }
  },

};
</script>

<style lang='less' scoped>
@import "../assets/css/iconfont.css";
nav {
  width: 100%;
  background-color: #f2473d;
  text-align: center;
  line-height: 0.4rem;
  color: white;
}
.van {
  position: absolute;
  width: 1rem;
  height: 0.4rem;
}
.price{
  background: red;
  height: 30px;
}
.iconfont {
  position: relative;
  top: -0.01rem;
  font-size: 0.3rem;
  color: rgba(0, 0, 0, 0.7);
  vertical-align: middle;
}
.cont {
  padding: 0;
  .title {
    margin: 0.2rem 0 0.3rem 0;
  }
  .img {
    display: flex;
    justify-content: space-around;
    margin: 0 auto;
  }
  .account {
    width: 3rem;

    margin-top: 0.3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 9;
    -webkit-box-orient: vertical;
  }
}
</style>